<template>

  <div>
    <data-table ref="pagingTable" :options="options" :list-query="listQuery">

      <template #data-columns>
        <el-table-column prop="realName" label="姓名"/>
        <el-table-column prop="phone" label="手机号"/>
        <el-table-column prop="companyName" label="单位"/>
        <el-table-column prop="jobType" label="工种/岗位"/>
        <el-table-column prop="workAreaName" label="作业区域"/>
        <el-table-column prop="entryTime" label="进厂时间"/>
        <el-table-column prop="leaveTime" label="离厂时间"/>
        <el-table-column prop="createTime" label="申请时间" width="180"/>
        <el-table-column prop="isApply" label="申请状态">
          <template v-slot="scope">
            <el-tag v-if="scope.row.isApply === '0'" type="warning">未通过</el-tag>
            <el-tag v-else-if="scope.row.isApply === '1'" type="success">通过</el-tag>
            <el-tag v-else-if="scope.row.isApply === '2'" type="danger">驳回</el-tag>
            <el-tag v-else-if="scope.row.isApply === '3'" type="info">待审核</el-tag>
            <el-tag v-else type="info">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="allPass" label="考试状态">
          <template v-slot="scope">
            <el-tag v-if="scope.row.allPass === 0" type="info">{{ scope.row.allPassTip }}</el-tag>
            <el-tag v-else-if="scope.row.allPass === 1" type="warning">{{ scope.row.allPassTip }}</el-tag>
            <el-tag v-else-if="scope.row.allPass === 2" type="success">{{ scope.row.allPassTip }}</el-tag>
            <el-tag v-else-if="scope.row.allPass === 3" type="danger">{{ scope.row.allPassTip }}</el-tag>
            <el-tag v-else type="info">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-button type="primary" size="mini" @click="showDetail(scope.row)">考试详情</el-button>
            <el-button type="success" size="mini" v-if="scope.row.allPass===2" @click="showCode(scope.row)">
              二维码
            </el-button>
          </template>
        </el-table-column>


      </template>

    </data-table>

    <el-dialog :visible.sync="dialogVisible" title="考试明细" width="60%">

      <div class="el-dialog-div">
        <my-paper-list :applyId="applyId"/>
      </div>

    </el-dialog>

    <el-dialog
      title="二维码信息"
      :visible.sync="qrCodeDialogVisible"
      width="600px"
    >
      <div style="text-align: center">
        <qr-code :qrCodeContent="qrCodeContent" :user-info="userInfo"/>
      </div>
    </el-dialog>

  </div>

</template>

<script>

import DataTable from '@/components/DataTable'
import MyPaperList from './paper'
import QrCode from '@/views/qr-code/code.vue'

export default {
  name: 'MyExamList',
  components: {MyPaperList, DataTable, QrCode},
  data() {
    return {
      qrCodeDialogVisible: false,
      qrCodeContent: '',
      loading: false,
      dialogVisible: false,
      applyId: 0,
      currentClickRow: null,

      listQuery: {
        current: 1,
        size: 10,
        params: {
          userName: this.$store.state.user.name,
          phone: this.$store.state.user.name,
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/exam/api/paper/paper/applyExamList'
      },
      userInfo: {
        realName: '',
        companyName: '',
      }
    }
  },
  methods: {
    showDetail(row) {
      this.currentClickRow = row
      this.dialogVisible = true
      this.applyId = this.currentClickRow.id
    },
    showCode(row) {
      // 获取后端api地址
      this.qrCodeContent = row.qrCodeBase64
      this.userInfo.realName = row.realName
      this.userInfo.companyName = row.companyName
      this.qrCodeDialogVisible = true
    }
  }
}
</script>

<style scoped>
</style>
